<!--
 * @Author: 330GRX 617947173@qq.com
 * @Date: 2023-09-28 13:42:48
 * @LastEditors: 330GRX 617947173@qq.com
 * @LastEditTime: 2023-10-02 12:08:13
 * @FilePath: \Realtime-Chat\web\src\components\Welcome.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="welcome-container">
    <img :src="Robot" alt="Robot" />
    <h1>
      Welcome，<span>{{ username }}！</span>
    </h1>
    <h3>开始新的聊天吧！</h3>
  </div>
</template>

<script setup>
import { ref, watchEffect, onBeforeUnmount } from 'vue'
import { useCurrentUserStore } from '@/stores/index'
import Robot from '../assets/robot.gif'

// 当前用户
const currentUserStore = useCurrentUserStore()
// 当前用户用户名
const username = ref('')

// watchEffect 也是一个帧听器，是一个副作用函数。
// 它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听。
// 这里监听到currentUserStore.currentUser改变
const stop = watchEffect(() => {
  if (currentUserStore.currentUser) {
    username.value = currentUserStore.currentUser.username
  }
}, [currentUserStore.currentUser])
onBeforeUnmount(() => {
  // 停止监听
  stop()
})
</script>

<style lang="scss" scoped>
.welcome-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  img {
    height: 20rem;
  }
  span {
    color: rgb(100, 182, 135);
  }
}
</style>
